<div class="row" >
  <div class="col-sm-10 col-sm-push-1">
    <form class="form content form-horizontal" [formGroup]="dsForm">
      <div class="row">
        <div class="col-lg-6 col-md-10 col-lg-push-2 col-md-push-2">
          <div class="one-form-header"></div>
          <div class="one-form-body">
            <div class="form-group">
              <label for="ds_add_dsName" class="col-xs-3 control-label"><span style="color: red;">*</span>数据源名称:</label>
              <div class="col-xs-9">
                <!--<input type="hidden" class="form-control" id="ds_add_dsName" formControlName="dbName"  >-->
                <input type="text" class="form-control" id="ds_add_dsName" placeholder='数据源名称 ' formControlName="dsName"  required >
                <div *ngIf="formErrors.dsName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.dsName}} </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="ds_add_Type" class="col-xs-3 control-label"><span style="color: red;">*</span>使用类型:</label>
              <div class="col-xs-9">
                <select class="multiselect" id="ds_add_Type" class="form-control" formControlName="useType"  >
                  <option *ngFor="let dic of useTypes" [value]="dic.value">{{dic.name}}</option>
                </select>
                <div *ngIf="formErrors.useType" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.useType}} </label>
                </div>
              </div>
            </div>
            <div class="form-group">
            <label for="ds_add_dbType" class="col-xs-3 control-label"><span style="color: red;">*</span>数据源类型:</label>
            <div class="col-xs-9">
              <select class="multiselect" id="ds_add_dbType" class="form-control" formControlName="dbType"  >
                <!--<option *ngFor="let state of states" [value]="state">{{state}}</option>-->
                <option value="0" >MongoDB</option>
                <option value="1" >Oracle</option>
              </select>
            </div>
          </div>
            <div class="form-group">
              <label for="ds_add_ip" class="col-xs-3 control-label"><span style="color: red;">*</span>IP地址:</label>
              <div class="col-xs-9">
                <!--<input type="hidden" class="form-control" id="ds_add_ip" formControlName="depId"  >-->
                <input type="text" class="form-control" id="ds_add_ip"  placeholder='IP地址 ' formControlName="ip" required >
                <div *ngIf="formErrors.ip" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.ip}} </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="ds_add_port" class="col-xs-3 control-label"><span style="color: red;">*</span> 端口:</label>
              <div class="col-xs-9">
                <!--<input type="hidden" id="ds_add_ip" formControlName="userId" name="userId">-->
                <input type="text" class="form-control" id="ds_add_port" placeholder='端口 '  formControlName="port"  required>
                <div *ngIf="formErrors.port" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.port}} </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="ds_add_dbName" class="col-xs-3 control-label"><span style="color: red;">*</span>数据库名称:</label>
              <div class="col-xs-9">
                <!--<input type="hidden" class="form-control" id="ds_add_ip" formControlName="depId"  >-->
                <input type="text" class="form-control" id="ds_add_dbName" placeholder='数据库名称 ' formControlName="dbName" required >
                <div *ngIf="formErrors.dbName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.dbName}} </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="ds_add_userName" class="col-xs-3 control-label"><span style="color: red;">*</span>用户名:</label>
              <div class="col-xs-9">
                <input type="text" class="form-control" id="ds_add_userName" placeholder='用户名' formControlName="userName" required>
                <div *ngIf="formErrors.userName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.userName}} </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="ds_add_passWord" class="col-xs-3 control-label"><span style="color: red;">*</span>密码:</label>
              <div class="col-xs-9">
                <input type="password" class="form-control" id="ds_add_passWord" placeholder='密码' formControlName="passWord" required>
                <div *ngIf="formErrors.passWord" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.passWord}} </label>
                </div>
              </div>
            </div>
            <div class="row">
              <label class="col-xs-3 control-label"  >启用:</label>
              <div class="col-sm-8 col-sm-push-1">
                <div class="row">
                  <div class="col-xs-5 ">
                    <input type="radio" id="ds_enable_yes" value="1" formControlName="isUse" name="isUse">
                    <label for="ds_enable_yes">
                      启用
                    </label>
                  </div>
                  <div class="col-xs-5">
                    <input type="radio" id="ds_enable_no" formControlName="isUse" checked value="0" name="isUse">
                    <label for="ds_enable_no">
                      禁用
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="one-form-footer">
            <div class="pull-right">
              <button class="btn btn-default" type="button" (click)="cancelDsAdd()">取消</button>
              <button class="btn btn-success" type="button"  [disabled]="dsForm.invalid" (click)="onSubmit()" >提交</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
